
$(function () {

  function rand(m, n) {
    var num = parseInt(Math.random() * (n + 1 - m)) + m;
    if (num === 0) {
      return rand(m, n);
    } else {
      return num
    }
  }

  $.get("/lession05/getAllData", function (data) {
    let arr = []
    console.log(data.data)
    for (var i = 0; i < data.data.length; i++) {
      var imgUrl = data.data[i].goods_big_logo
      arr.push(imgUrl)
    }
    var randArr = arr[rand(0, arr.length)]

    setInterval(function () {
      $(".swiper").empty()
      RandAjax()

    }, 9000)


    function RandAjax() {
      $("#container").html(`
        <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"   style="background:url(${arr[rand(0, arr.length)]}); background-size: 100%;"></div>
          <div class="swiper-slide"  style="background:url(${arr[rand(0, arr.length)]}); background-size: 100%"></div>
          <div class="swiper-slide"  style="background:url(${arr[rand(0, arr.length)]}); background-size: 100%"></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
        
        `)

      var mySwiper = new Swiper('.swiper', {
        autoplay: true,//可选选项，自动滑动
        loop: true,
        effect: 'cube',
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6
        },
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },


      })
    }
    RandAjax()
    ///轮播图结束
    //定义一个空
    var str = ``

    //循环添加结构
    for (var i = 0; i < 8; i++) {
      //定义一个随机数
      var randarr = rand(0, arr.length)
      
      str += `
      <div>
        <li style="background:url(${data.data[randarr -1 ].goods_big_logo});background-size: 100%;"></li>
        <a href="/html/detail.html?id=${randarr}" class="btn btn-primary">查看详情</a>
      </div>
      `
    }
    $(".nav-tp").html(str)


  })

})